<template>
	<view class="login-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="寿光数字人大平台"></uni-navbar></view>
		<view class="logo-box">
			<view class="image-bg">
				<image class="logo-image" src="../../static/login-logo.png"></image>
			</view>
			<!-- <view class="logo-ttl">
				<image class="bg-img" src="/static/img/login_bg01.png" mode="aspectFill"></image>
				<image class="h1-img" src="/static/img/h1_img_3707.png" mode="widthFix"></image>
			</view> -->
		</view>

		<u-tabs class="uTabs" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"></u-tabs>

		<view v-show="tabsCurrent == 0">
			<view class="form-box">
				<u-form :model="form" ref="uForm">
					<u-form-item class="form-item" left-icon="phone-fill" prop="tel"><u-input inputAlign="left"
							v-model="form.tel" type="number" placeholder="请输入手机号" /></u-form-item>
					<u-form-item class="form-item" left-icon="lock-fill" prop="smsCode">
						<u-input inputAlign="left" v-model="form.smsCode" type="number" placeholder="请输入验证码"></u-input>
						<u-button class="code" slot="right" type="error" size="mini"
							@click="getCode">{{ codeTips }}</u-button>
						<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					</u-form-item>
					<u-button class="form-btn" shape="circle" type="error" @click="submit">登录</u-button>
				</u-form>
			</view>
		</view>
		<view v-show="tabsCurrent == 1">
			<view class="form-box">
				<u-form :model="form1" ref="uForm1">
					<u-form-item class="form-item" left-icon="account-fill" prop="username"><u-input inputAlign="left"
							v-model="form1.username" type="text" placeholder="请输入账号"></u-input></u-form-item>
					<u-form-item class="form-item" left-icon="lock-fill" prop="password"><u-input inputAlign="left"
							v-model="form1.password" type="password" placeholder="请输入密码"></u-input></u-form-item>
					<u-form-item class="form-item" left-icon="coupon-fill" v-if="codeFlag">
						<u-input inputAlign="left" v-model="form1.code" type="text" placeholder="请输入验证码"
							maxlength="4"></u-input>
						<view class="code" slot="right"><uni-img-code></uni-img-code></view>
					</u-form-item>
				</u-form>
				<u-button class="form-btn" shape="circle" type="error" @click="submitForm">登录</u-button>
			</view>
		</view>

		<!-- <view class="fiexd-box">
			<view class="fiexd-item" @click="nameLogin" v-if="tip">
				<image :src="$staticImg('/static/img/icon_68.png')" mode="aspectFill"></image>
				{{ tip }}
			</view>
		</view> -->
		<!-- <view class="fiexd-box">
			<view class="fiexd-item" @click="show = !show">切换人大登录</view>
			<view class="code-box" v-if="show">
				<view class="top-bar"><uni-navbar :show="show" @click-show="show = !show" :fixed="true" :back="true" color="#fff" title="选择人大"></uni-navbar></view>
				<image class="code-logo" src="/static/img/logo_s.png" mode="aspectFill"></image>
				<view class="code-item">
					<view class="clamp" :class="form.clientCode == 3707 ? 'active' : ''" @click="codeTap(3707)">潍坊市人大</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniImgCode from '@/components/uni-img-code.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniImgCode
		},
		data() {
			return {
				tabsCurrent: 0,
				codeFlag: false,
				tabsList: [{
						name: '手机登录',
						value: 0
					},
					{
						name: '密码登录',
						value: 1
					}
				],

				tip: '',
				show: false,
				codeTips: '获取验证码',
				form: {
					tel: '',
					smsCode: '',
					clientCode:  this.$c.clientCode
				},
				form1: {
					username: '',
					password: '',
					clientCode: this.$c.clientCode,
					code: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: 'change'
					}],
					tel: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change']
						}
					],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			};
		},
		onLoad(option) {
			this.$logout();
			this.$request('/sms/codeNeed').then((res) => {
				if (res.msg == 'code') {
					this.codeFlag = true;
				}
			});

			this.form1.username = uni.getStorageSync('username');
			this.form1.password = uni.getStorageSync('password');
			// this.form1.username = '3707';
			// this.form1.password = '1';
			this.tip = uni.getStorageSync('tip');
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.$refs.uForm1.setRules(this.rules);
		},
		onShareAppMessage(res) {
			return {
				title: '寿光数字人大平台',
				path: '/pages/index/index'
			};
		},
		onShareTimeline(res) {
			return {};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			codeTap(e) {
				this.form.clientCode = e;
				this.form1.clientCode = e;
				this.show = !this.show;
			},
			codeChange(text) {
				this.codeTips = text;
			},
			tabsChange(index) {
				this.tabsCurrent = index;
			},
			nameLogin() {
				uni.navigateTo({
					url: '/pages/login/scan'
				});
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$request(
						'/sms/code?tel=' + this.form.tel, {}, {
							load: true
						}
					).then((res) => {
						this.$msg('验证码已发送');
						this.$refs.uCode.start();
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit(e) {
				this.$refs.uForm.validate((valid) => {
					if (!valid) {
						return false;
					}
					// this.login(this.form);

					// #ifdef MP
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							this.login(loginRes);
						}
					});
					// #endif
					// #ifndef MP
					this.login({
						code: '233'
					});
					// #endif
				});
			},
			login(loginRes) {
				let form = {
					tel: this.form.tel,
					smsCode: this.form.smsCode,
					clientCode: this.form.clientCode,
					wxCode: loginRes.code
				};

				this.$request('/sms/login', form, {
					content: 'application/x-www-form-urlencoded',
					load: true
				}).then((res) => {
					if (res.data.msg && res.data.msg.indexOf('手机号未注册') != -1) {
						uni.showModal({
							title: '提示',
							confirmText: '拨打电话',
							content: '您输入的手机号在平台中没有匹配到，无法核实您的信息，请联系管理员解决！',
							success: (res) => {
								if (res.confirm) {
									uni.makePhoneCall({
										phoneNumber: this.tel
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return false;
					}
					if (!res.data.Authorization) {
						this.$msg('登录失败');
						return false;
					}
					let userInfo = res.data;
					this.$store.commit('login', userInfo);
					// XXX 2023-04-12 start
					uni.switchTab({
						url: '/pages/load/index'

					})
					// XXX 2023-04-12 end

					//HACK 2023-04-12 跳转‘一个tab首页’ start
					// uni.reLaunch({
					// 	url: '/pages/index/index'
					// });
					//HACK 2023-04-12 跳转‘一个tab首页’ end
				});
			},
			submitForm() {
				const imgCode = uni.getStorageSync('imgcode');
				this.$refs.uForm1.validate((valid) => {
					if (!valid) {
						return false;
					}
					if (this.codeFlag && this.form1.code.toLowerCase() !== imgCode) {
						this.$msg('验证码错误！');
						return false;
					}

					// #ifdef MP
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							this.loginForm(loginRes);
						}
					});
					// #endif
					// #ifndef MP
					this.loginForm({
						code: '233'
					});
					// #endif
				});
			},
			loginForm(loginRes) {
				let form = {
					username: this.form1.username + ',' + this.form1.clientCode,
					password: this.$rsa(this.form1.password),
					code: this.form1.code,
					clientCode: this.form1.clientCode,
					wxCode: loginRes.code
				};

				this.$request('/myLogin', form, {
					content: 'application/x-www-form-urlencoded',
					load: true
				}).then((res) => {
					if (!res.data.Authorization) {
						this.$msg('登录失败！');
						return false;
					}
					let userInfo = res.data;
					this.$store.commit('login', userInfo);

					uni.setStorageSync('username', this.form1.username);
					uni.setStorageSync('password', this.form1.password);

					if (userInfo.sysUser.remark7 == '0' || userInfo.sysUser.remark7 == '3' || userInfo.sysUser
						.remark7 == '4') {
						let pwdMsg = userInfo.sysUser.remark9;
						this.$msg(pwdMsg ? pwdMsg : '初始密码，请先修改密码！');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/password?id=' + userInfo.sysUser.id
							});
						}, 500);
						return false;
					}

					// XXX 2023-04-12 start
					uni.switchTab({
						url: '/pages/load/index'

					})
					// XXX 2023-04-12 end

					//HACK 2023-04-12 跳转‘一个tab首页’ start
					// uni.reLaunch({
					// 	url: '/pages/index/index'
					// });
					//HACK 2023-04-12 跳转‘一个tab首页’ end
				});
			}
		}
	};
</script>

<style lang="scss">
	.login-view {
		min-height: 100vh;
		overflow: hidden;
		background: #fff no-repeat top center;
	}

	.logo-box {
		text-align: center;
		// background-color: #e5231a;

		.logo-ttl {
			position: relative;
			margin: 0 auto 20rpx;
			width: 100%;
			height: 540rpx;
		}

		.h1-img {
			position: absolute;
			left: 50%;
			top: 160rpx;
			width: 520rpx;
			transform: translateX(-50%);
		}

		.bg-img {
			margin-top: -88rpx;
			width: 100%;
			height: 540rpx;
		}
	}

	.code-box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		background-color: #fff;

		.code-logo {
			display: block;
			margin: 66rpx auto 48rpx;
			width: 164rpx;
			height: 164rpx;
		}

		.code-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0 66rpx;

			.clamp {
				margin-bottom: 40rpx;
				max-width: 48%;
				width: 300rpx;
				height: 92rpx;
				font-size: 17px;
				color: #e5231a;
				line-height: 88rpx;
				border-radius: 8rpx;
				text-align: center;
				border: 1rpx solid #e5231a;
			}

			.active {
				color: #fff;
				background-color: #e5231a;
			}
		}
	}

	.form-box {
		position: relative;
		z-index: 300;
		margin: 30rpx 48rpx;

		.dataTime {
			width: 100%;
		}

		.form-btn {
			display: block;
			margin-top: 40rpx;
			width: 100%;
		}
	}

	.fiexd-box {
		margin: 40rpx 0;

		.fiexd-item {
			padding: 20rpx 0;
			width: 100%;
			text-align: center;
		}
	}
</style>